"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ChevronRight } from "lucide-react"

interface WisdomCardProps {
  title: string
  content: string
  category: string
  tags: string[]
  time: string
  priority?: "high" | "medium" | "low"
  onClick?: () => void
}

export function WisdomCard({ title, content, category, tags, time, priority, onClick }: WisdomCardProps) {
  return (
    <Card
      className="bg-white/70 backdrop-blur-sm border-0 shadow-sm hover:shadow-md transition-all duration-300 cursor-pointer"
      onClick={onClick}
    >
      <CardContent className="p-4">
        <div className="flex items-start justify-between mb-3">
          <div className="flex-1">
            <div className="flex items-center space-x-2 mb-2">
              <Badge variant="outline" className="text-xs">
                {category}
              </Badge>
              {priority && (
                <Badge
                  variant={priority === "high" ? "destructive" : priority === "medium" ? "default" : "secondary"}
                  className="text-xs"
                >
                  {priority === "high" ? "重要" : priority === "medium" ? "关注" : "一般"}
                </Badge>
              )}
              <span className="text-xs text-slate-500">{time}</span>
            </div>
            <h3 className="font-semibold text-slate-900 mb-2 leading-relaxed">{title}</h3>
            <p className="text-sm text-slate-600 leading-relaxed mb-3">{content}</p>
            <div className="flex flex-wrap gap-1">
              {tags.map((tag, index) => (
                <span key={index} className="text-xs px-2 py-1 bg-blue-100 text-blue-700 rounded-full">
                  {tag}
                </span>
              ))}
            </div>
          </div>
          <ChevronRight className="w-5 h-5 text-slate-400 ml-4 flex-shrink-0" />
        </div>
      </CardContent>
    </Card>
  )
}
